{extend name="public/container"}
{block name="content"}
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="{__ADMIN_PATH}plug/ueditor/lang/zh-cn/zh-cn.js"></script>
<div id="myApp" class="formData">
    <div class="add-page-title flex flex-between padding-20">
        <div class="title">新增/编辑</div>
        <el-link :underline="false" type="primary" href="{:Url('index')}">返回</el-link>
    </div>

    <div class="padding-10">
        <div class="content-wrap flex flex-between padding-20">
            <div class="basic-info-form-wrap">
                <el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
                    <div class="statistic">
                        <!-- 基础信息-->
                        <div class="item">
                            <div class="content-wrap flex flexcolumn padding-20">
                                <el-form-item label="文章标题" prop="title">
                                    <el-input size="small" v-model="formData.title"></el-input>
                                </el-form-item>

                                <el-form-item label="版本号" prop="version">
                                    <el-input size="small" v-model="formData.version"></el-input>
                                </el-form-item>

                                <el-form-item label="文章类别" prop="cate_id">
                                    <el-select size="small" :clearable=true v-model="formData.cate_id" placeholder="文章类别">
                                        <el-option v-for="item in categories" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="排序" prop="sort">
                                    <el-input-number :controls="false" size="small" v-model="formData.sort"></el-input-number>
                                </el-form-item>

                                <el-form-item label="详情" prop="detail">
                                    <textarea  style="width:100%;height: 500px" id="myEditor">{{formData.content}}</textarea>
                                </el-form-item>

                                 <el-form-item>
                                    <el-button type="primary" @click="doSave('formData')">保存</el-button>
                                    <el-button @click="doReset('formData')">取消</el-button>
                                 </el-form-item>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    var categories = <?=isset($categories) ? json_encode($categories) : "[]"?>;
    var data    = <?=isset($data) ? $data : "{}"?>;

    var my = new Vue({
        el: "#myApp",
        data: {
            ue:null,
            formData:{
                id:data.id || 0,
                title:data.title || '',
                cate_id:data.cate_id || '',
                version:data.version || '',
                sort:data.sort || 0,
                content:data.content || '',
            },
            categories:categories,
            rules: {
              title: [
                { required: true, message: '请输入名称', trigger: 'blur' },
                { min: 2, max: 50, message: '长度在 3 到 70 个字符', trigger: 'blur' }
              ],
              version: [
                { required: true, message: '请输入版本号，参考格式1.0.1', trigger: 'blur' },
                { min: 1, max: 20, message: '长度在 1 到 20 个字符，参考格式1.0.1', trigger: 'blur' }
              ],
              cate_id: [
                { required: true, message: '此项不能为空', trigger: 'change' }
              ],
            }
        },
        methods: {
            doSave(formName) {
                this.$refs[formName].validate((valid) => {
                    if ( valid ) {
                        this.formData.content = this.ue.getContent()
                        if ( !this.formData.content ) return this.$message.error('内容不能为空')
                        axios.post(Url({a:'save'}) , this.formData).then(res => {
                            this.$message({
                                message: res.data.msg,
                                type: res.data.code === 200 ? 'success' : 'error',
                            });

                            setTimeout( function() {
                                location.href = Url({a:'index'})
                            },2000);
                        }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        })
                    }
                });
            },
            doReset(formName) {
                this.$confirm('确认取消并返回列表页吗?').then(_ => {
                    window.location.href = Url('index')
                }).catch(_ => {})
            }
        },
        mounted(){
            //实例化编辑器
            this.ue = UE.getEditor('myEditor');
        }
    })
</script>
{/block}